<template>
    <div class="user-profile-container">
        <el-card class="profile-card">
            <!-- Title -->
            <div class="title">个人信息</div>

            <!-- Tabs -->
            <el-tabs v-model="activeTab" class="profile-tabs">
                <el-tab-pane label="基本资料" name="basic" />
                <el-tab-pane label="修改信息" name="password" />
            </el-tabs>

            <!-- Basic Info Form -->
            <div v-if="activeTab === 'basic'" class="form-section">
                <el-form label-width="80px">
                    <el-form-item label="用户昵称:">
                        <span>{{ basicInfo.nickname }}</span>
                    </el-form-item>
                    <el-form-item label="手机号码:">
                        <span>{{ basicInfo.phone }}</span>
                    </el-form-item>
                    <el-form-item label="用户邮箱:">
                        <span>{{ basicInfo.email }}</span>
                    </el-form-item>
                    <el-form-item label="所属角色:">
                        <span>{{ basicInfo.belongingrole }}</span>
                    </el-form-item>
                </el-form>
                
            </div>

            <!-- Password Change Form -->
            <div v-if="activeTab === 'password'" class="form-section">
                <el-form label-width="80px">
                    <el-form-item label="用户名称">
                        <el-input v-model="userInfo.username" style="width: 240px" />
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="userInfo.gender">
                            <el-radio label="male">男</el-radio>
                            <el-radio label="female">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="所属地址">
                        <el-select v-model="al1" placeholder="国家" style="width: 240px">
                            <el-option :label="11" :value="11" />
                            <el-option :label="11" :value="111" />
                            <el-option :label="11" :value="11" />
                            <el-option :label="11" :value="11" />
                            <el-option :label="11" :value="11" />
                        </el-select>
                        <el-select v-model="al2" placeholder="省" style="width: 240px">
                            <el-option :label="11" :value="11" />
                            <el-option :label="11" :value="11" />
                            <el-option :label="11" :value="11" />
                            <el-option :label="11" :value="11" />
                            <el-option :label="11" :value="11" />
                        </el-select>
                        <el-select v-model="al3" placeholder="市" style="width: 240px">
                            <el-option :label="11" :value="11" />
                            <el-option :label="11" :value="11" />
                            <el-option :label="11" :value="11" />
                            <el-option :label="11" :value="11" />
                            <el-option :label="11" :value="11" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="详细地址">
                        <el-input v-model="userInfo.account" style="width: 240px" />
                    </el-form-item>

                </el-form>
                <el-button type="primary">保存</el-button>
                 <el-button type="danger">取消</el-button>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref('basic');

// Basic information
const basicInfo = ref({
    nickname: '张三',
    phone: '13800138000',
    email: 'user@example.com',
    belongingrole: "xxx角色"
});

// User information
const userInfo = ref({
    username: '张三',
     gender: 'male',
     al1:"111",
     al2:'22',
     al3:"333",
    account: 'zhangsan123'
});

// Password change
const passwordInfo = ref({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
});
</script>

<style scoped>
.user-profile-container {
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.profile-card {
    padding: 20px;
}

.title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.profile-tabs {
    margin-bottom: 20px;
}

.form-section {
    padding: 0 10px;
}

.el-form-item {
    margin-bottom: 18px;
}
.el-input__wrapper{
    width:10px   
}
.el-button{
    margin:10px 0 0 50px;
}
</style>